<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格与表单标签示例</title>
  <style>
    body { max-width: 1000px; margin: 0 auto; padding: 20px; line-height: 1.6; }
    table { width: 100%; border-collapse: collapse; margin: 20px 0; }
    th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
    th { background-color: #f5f5f5; }
    .form-group { margin: 15px 0; }
    label { display: inline-block; width: 100px; }
    input, select, textarea { width: 300px; padding: 8px; box-sizing: border-box; }
    button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
    button:hover { background-color: #45a049; }
  </style>
</head>
<body>
  <h2>一、表格标签（table）应用</h2>
  <p>用于展示结构化数据（如学生信息表）：</p>
  
  <table>
    <!-- 表头 -->
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>专业</th>
      </tr>
    </thead>
    <!-- 表体 -->
    <tbody>
      <tr>
        <td>2023001</td>
        <td>张三</td>
        <td>男</td>
        <td>20</td>
        <td>计算机科学</td>
      </tr>
      <tr>
        <td>2023002</td>
        <td>李四</td>
        <td>女</td>
        <td>19</td>
        <td>软件工程</td>
      </tr>
      <tr>
        <td>2023003</td>
        <td>王五</td>
        <td>男</td>
        <td>21</td>
        <td>数据科学</td>
      </tr>
    </tbody>
    <!-- 表尾（可选） -->
    <tfoot>
      <tr>
        <td colspan="5" style="text-align: center;">总计：3名学生</td>
      </tr>
    </tfoot>
  </table>

  <h2>二、表单标签（form）应用</h2>
  <p>用于收集用户信息（如学生注册表单）：</p>
  
  <form action="/submit" method="post">
    <div class="form-group">
      <label for="name">姓名：</label>
      <input type="text" id="name" name="username" required placeholder="请输入姓名">
    </div>
    
    <div class="form-group">
      <label for="gender">性别：</label>
      <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">其他</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="age">年龄：</label>
      <input type="number" id="age" name="age" min="16" max="30" placeholder="16-30岁">
    </div>
    
    <div class="form-group">
      <label>兴趣爱好：</label>
      <input type="checkbox" id="hobby1" name="hobby" value="reading">
      <label for="hobby1">阅读</label>
      <input type="checkbox" id="hobby2" name="hobby" value="sports">
      <label for="hobby2">运动</label>
      <input type="checkbox" id="hobby3" name="hobby" value="coding">
      <label for="hobby3">编程</label>
    </div>
    
    <div class="form-group">
      <label for="major">专业：</label>
      <input type="radio" id="major1" name="major" value="cs" checked>
      <label for="major1">计算机科学</label>
      <input type="radio" id="major2" name="major" value="se">
      <label for="major2">软件工程</label>
    </div>
    
    <div class="form-group">
      <label for="intro">个人简介：</label>
      <textarea id="intro" name="introduction" rows="4" placeholder="请简要介绍自己"></textarea>
    </div>
    
    <div class="form-group">
      <label></label>
      <button type="submit">提交</button>
      <button type="reset" style="margin-left: 10px; background-color: #f44336;">重置</button>
    </div>
  </form>
</body>
</html>